<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="60%" append-to-body custom-class="import-dialog">
      <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
          <el-form-item label="姓名" prop="proprietorName">
            <el-input v-model="queryParams.proprietorName" placeholder="请输入姓名" clearable style="width: 240px"
                      @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="proprietorMobile">
            <el-input v-model="queryParams.proprietorMobile" placeholder="请输入手机号" clearable style="width: 240px"
                      @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" ref="table">
          <!-- <el-table-column label="楼盘编号" align="center" prop="estateId" /> -->
          <el-table-column label="姓名" align="center" prop="proprietorName"/>
          <el-table-column label="身份证/统一社会信用证" align="center" prop="proprietorName">
            <template #default="scope">
              <span v-if="scope.row.proprietorType == 1">
                {{scope.row.cardNumber}}
              </span>
              <span v-if="scope.row.proprietorType == 2">
                {{scope.row.socialCreditCode}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" align="center" prop="proprietorMobile"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="primary" v-show="selectState(scope.row.estateId)" :disabled="true">已选择</el-button>
              <el-button v-show="!selectState(scope.row.estateId)" @click="selectHandle(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center" v-if="isMultiple">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProprietor } from '@/api/contract/proprietor'

export default {
  props: {
    title: {
      default: '选择业主'
    },
    value: {
      default: false
    },
    selected: {
      default: []
    },
    isMultiple: {
      default: true
    },
    cooperationType:{
      default:''
    }

  },
  dicts: [],
  data() {
    return {
      visible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        proprietorName: undefined,
        proprietorMobile: undefined,
        houseCommissionStatus: undefined,
        proxyServiceStatus: undefined,
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      //选择列表
      selectList: []
    }
  },
  computed: {
    selectState: {
      get() {
        return (estateId) => {
          let id = this.selectList.find(item => item == estateId)
          if (id) {
            return true
          }
          return false
        }
      },
      set(v) {
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
      this.visible = newVal // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit('input', val) // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
    selected: {
      handler(val) {
        if (val) {
          const list = Array.isArray(val) ? val : val.split(',')
          this.selectList = list
        } else {
          this.selectList = []
          return []
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getList()
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        proprietorName: undefined,
        proprietorMobile: undefined,
        houseCommissionStatus: undefined,
        proxyServiceStatus: undefined,
      }
      if(this.cooperationType == 1){
        this.queryParams['houseCommissionStatus'] = 2
        this.queryParams['proxyServiceStatus'] = undefined
      }else if(this.cooperationType == 2){
        this.queryParams['houseCommissionStatus'] = undefined
        this.queryParams['proxyServiceStatus'] = 3
      }else{
        this.queryParams['houseCommissionStatus'] = undefined
        this.queryParams['proxyServiceStatus'] = undefined
      }

    },
    handleQuery() {
      this.getList()
    },
    resetQuery() {
      // this.dateRange = [];
      this.queryParams.provinceId = ''
      this.queryParams.cityId = ''
      this.queryParams.districtId = ''
      this.queryParams.streetId = ''
      this.queryParams.communityId = ''
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 查询房间列表 */
    getList() {
      this.loading = true
      listProprietor(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleSelectionChange() {
    },
    // 选择
    selectHandle(row) {
      let index = this.selectList.findIndex(item => item == row.estateId)
      if (index > -1) {
        this.selectList.splice(index, 1)
      } else {
        if (this.isMultiple) {
          this.selectList.push(row)
        } else {
          this.selectList = [row]
          this.submitForm()
        }

      }

    },
    handleChangeArea(val) {
      const checkedNode = this.$refs['areaPicker'].panel.getNodeByValue(val)
      const ids = checkedNode.path
      this.queryParams.provinceId = ids[0]
      this.queryParams.cityId = ids[1]
      this.queryParams.districtId = ids[2]
      this.queryParams.streetId = ids[3]
      this.queryParams.communityId = ids[4]
    },
    submitForm() {
      let list = JSON.parse(JSON.stringify(this.selectList))
      if (this.isMultiple) {
        this.$emit('success', list)
      } else {
        this.$emit('success', list[0])
      }

      this.reset()
      this.visible = false
    },
    cancel() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog.scss";
</style>
